<template>
  <div class="whiteBorder-page">
    <common-header :headTitle='headTitle'>
      <span slot="porjectBtn"></span>
      <div slot="porjectName"></div>
      <div slot="cameraAndCar"></div>
    </common-header>
    <div class="content">
      <div class="projects-list">
        <span class="span-title">选择预展示的项目:</span>
        <div class="item-list">
          <Col span="7" style="margin-right:20px;margin-bottom:20px;" v-for="(item,index) in projectsList" :key="index">
            <div class="project-name" @click="goWbProjectDetails(item)"><span>{{item}}</span></div>
            <!-- <Card :bordered="true" padding="0">
                <p slot="title">{{item}}</p>
            </Card> -->
          </Col>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import CommonHeader from '@/components/header/CommonHeader'
import {removeCachedData} from '../service/cachingData.js'
export default {
  data() {
    return {
      headTitle:'',
      projectsList:['项目名称1','项目名称2','项目名称3','项目名称4','项目名称5','项目名称6']
    }
  },
  components: {
    CommonHeader
  },
  methods: {
    goWbProjectDetails(item){
      removeCachedData(['projectName']);
      this.$router.push({path:'/wbdetails',name:'WbDetails',params:{headTitle:item}})
    }
  }
}
</script>

<style scoped lang='scss'>
.whiteBorder-page{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  .content{
    display: flex;
    width: 100%;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 20px 40px;
    background: #000;
    overflow-y: scroll;

    .projects-list{
      width: 60%;
      height: 60%;
      // background: #788566;

      .span-title{
        font-size: 26px;
        color: #fff;
      }

      .item-list{
        display: flex;
        justify-content:space-around;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        flex:1;
        margin-top: 30px;
        // background: #fff;

        .project-name{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 80px;
          background: #fff;
          border-radius: 10px;
          margin-bottom: 20px;

          span{
            font-size: 18px;
            color: #000;
          }
        }
      }
    }
  }
}
</style>
